
<html>
<head>
  <title>testing a decision table</title>
  <style>

    /* tb rl */
    /* t r b l */

    body {
      font-family: "Helvetica Neue Light", Helvetica, Arial, sans-serif;
      font-size: 12pt;
    }

    #central {
    }
    #left_pane {
      width: 100px;
      float: left;
    }
    #right_pane {
      margin-left: 10px;
      float: left;
    }

    .table_buttons {
      font-size: 70%
    }

    .ruse_cell {
      border-top: 1px solid #dddddd;
      border-left: 1px solid #dddddd;
      border-right: 1px solid #F0F0F0;
      border-bottom: 1px solid #F0F0F0;
      margin: 0;
      padding: 0;
      text-align: right;
    }
    /*.ruse_cell:focus { // not used
      background-color: #f0f0f0;
    }*/
    .focused {
      background-color: #f0f0f0;
    }
    .ruse_headcell {
      height: 1em;
      float: left;
      background: #f0f0f0 url(/images/ruse_head_bg.png) repeat top left;
    }
    .ruse_headcell_left {
      float: left;
      background: white;
      height: 1em;
      width: 1px;
    }
    .ruse_headcell_handle {
      height: 1em;
      width: 3px;
      cursor: w-resize;
      float: right;
    }
  </style>

  <script src="js/ruote-sheets.js"></script>
  <script src="js/request.js"></script>
</head>

<body>

<div id="central">

  <div id="left_pane">
    <img src="/images/arrow.png" align="right"/>
  </div>

  <div id="right_pane">

    in : <span class="table_buttons">
      <a href="#" onclick="RuoteSheets.addRow('sheet_in');">add row</a>
      <a href="#" onclick="RuoteSheets.addCol('sheet_in');">add col</a>
      <a href="#" onclick="RuoteSheets.deleteRow('sheet_in');">del row</a>
      <a href="#" onclick="RuoteSheets.deleteCol('sheet_in');">del col</a>
      <a href="#" onclick="RuoteSheets.undo('sheet_in');">undo</a>
    </span>
    <div id='sheet_in'></div>

    <br/>

    decision table : <span class="table_buttons">
      <a href="#" onclick="RuoteSheets.addRow('sheet_decision');">add row</a>
      <a href="#" onclick="RuoteSheets.addCol('sheet_decision');">add col</a>
      <a href="#" onclick="RuoteSheets.deleteRow('sheet_decision');">del row</a>
      <a href="#" onclick="RuoteSheets.deleteCol('sheet_decision');">del col</a>
      <a href="#" onclick="RuoteSheets.undo('sheet_decision');">undo</a>
    </span>
    <div id='sheet_decision'></div>

    <br/>

    <input type="submit" onclick='return decide();' value='decide !'/><br />

    <br/>

    out :
    <div id='sheet_out'></div>

  </div>

</div>

<!-- some javascript -->

<script src="/in.js"></script>
<script src="/decision.js"></script>

<script>

  RuoteSheets.render('sheet_in', data_in);
  RuoteSheets.render('sheet_decision', data_decision);

  function decide () {

    var data =
      '[' +
      JSON.stringify(RuoteSheets.toArray('sheet_in')) + ',' +
      JSON.stringify(RuoteSheets.toArray('sheet_decision')) +
      ']';

    var result = httpPost('/decide', data);
    result = JSON.parse(result);

    RuoteSheets.render('sheet_out', result);
  }

</script>

</body>
</html>

